<template>
  <div class='container'>
    <h3>{{value.title}}</h3>
    <!-- <span>{{value}}</span> -->
    <div>
      <span class="instro">{{value.createTime | parseTimeByString}}</span>
      <span class="instro" v-if="value.creatorID===2">超级管理员</span>
      <span class="instro" v-else>其他</span>
      <span class="instro">
        <i class="el-icon-view"></i>
        {{value.visits}}
      </span>
    </div>
    <template >
      <div class="content" v-html="value.articleBody"></div>
    </template>
  </div>
</template>

<script>
export default {
  name: 'articles-preview',
  props: {
    value: {
      type: Object
    }
  },
  data () {
    return {
      info: {
        id: 1,
        title: '',
        articleBody: '',
        visits: 0,
        state: 1,
        createTime: '',
        creatorID: 1
      }
    }
  },
  created () {
    // console.log('文章详情预览', this.value.data)
  },
  methods: {
  }
}
</script>

<style scoped>
.container {
  width: 100%;
}
.instro {
  display: inline-block;
  margin-right: 15px;
  margin-bottom: 20px;
}
.content {
  width:760px;
  background-color: rgb(247, 247, 247);
  border-top: 1px dashed #c7c7c7;
  padding: 10px;
}
/* 因为 */
.content /deep/ img {
  width: 100%;
  /* height: 100px; */
  /* display: inline-block; */

}
</style>
